<template>
    <div>
      <div class="calculator">
        <input type="text" v-model="value">
        <button>C</button>
        <button>+/-</button>
        <button>%</button>
        <button class="width2">-----</button>
        <br>
        <button @click='go'>7</button>
        <button @click='go'>8</button>
        <button @click='go'>9</button>
        <button >X<sup>2</sup></button>
        <button >√</button>
        <br>
        <button @click='go'>4</button>
        <button @click='go'>5</button>
        <button @click='go'>6</button>
        <button >X</button>
        <button >÷</button>
        <br>
        <button @click='go'>1</button>
        <button @click='go'>2</button>
        <button @click='go'>3</button>
        <button>+</button>
        <button>-</button>
        <br>
        <button @click='go' class="width2">0</button>
        <button  @click='go'>.</button>
        <button class="width2">=</button>
      </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
          value:''
        };
    },
    created() {
    },
    methods: {
      go(e) {
        if(this.value == ''){
          this.value = e.toElement.innerText
      }

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.calculator{
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  padding: 0 20px;
  input{
    width: 360px;
    height: 40px;
    margin: 10px;
    
  }
  button{
    width: 60px;
    height: 50px;
    margin: 10px;
  }
  .width2{
    width: 140px;
  }
}
</style>
